Layui tree定制化(自定义增删改操作、选中变色） |
您所在的位置：网站首页 › react 封装tree自定义增删改查 › Layui tree定制化(自定义增删改操作、选中变色） |
Layui tree定制化(自定义增删改操作、选中变色）
|
Layui tree定制化(自定义增删改操作、选中变色） 定制化之前，请先熟悉LayuiTree文档基本操作。 一、自定义增删改操作Layui tree自带的增删改操作，太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。
如果是压缩版先格式化，搜索prototype.operate或者if ("add" == f)，修改源码在原先的if判断最外层再加上我们自定义属性的判断。 b.prototype.operate = function(e, a) { var t = this, r = t.config, l = e.children("." + p), d = l.children("." + f); l.children(".layui-tree-btnGroup").on("click", ".layui-icon", function(l) { layui.stope(l); var f = i(this).data("type"), b = e.children("." + v), g = { data: a, type: f, elem: e }; //注意这里的r 对应着上面的r = t.config的变量 有可能你的不叫r，修改成自己的变量名称 if (r.customOperate) { console.log("修改源码。。。"); //注意这里的g 对应着上面的g = {data: a, type: f, elem: e}的变量 有可能你的不叫g，修改成自己的变量名称 r.operate && r.operate(g); } else { //注意要把下面整个if else if 到粘过来 //省略。。。 } }) }, 3.增加自定义操作修改完源码后，再次点击增删改按钮就不会执行默认的方法了。我们就可以在operate下添加我们自定义的一些操作了。 var index0pen; var $ = layui.$; //基本演示 tree.render({ elem: '#test1' ,data: data ,onlyIconControl: true ,edit: ['add', 'update', 'del'] ,click: function(obj){ var data = obj.data; layer.msg('状态：'+ obj.state + '节点数据：' + JSON.stringify(data)); } ,customOperate: true , operate: function (obj) { var type = obj.type; //得到操作类型：add、edit、del var data = obj.data; //得到当前节点的数据 var elem = obj.elem; //得到当前节点元素 //Ajax 操作 var id = data.id; //得到节点索引 if (type === 'add') { //增加节点 $("#add-form input[name='parentId']").val(id); $("#add-form input[name='title']").val(''); index0pen = layer.open({ type: 1, title: "新增", area: ['500px', '200px'], content: $("#add-node") }); } else if (type === 'update') { //修改节点 $("#update-form input[name='deptId']").val(id); $("#update-form input[name='parentId']").val(data.parentId); $("#update-form input[name='title']").val(data.title); index0pen = layer.open({ type: 1, title: "修改", area: ['500px', '200px'], content: $("#update-node") }); } else if (type === 'del') { //删除节点 $.ajax({ url: '/admin/dept/delete/' + id, type: 'get', dataType: 'json', success: function (data) { if (data.code == 0) { //关闭 layer.close(index0pen); layer.msg('删除成功！', {icon: 1}); setTimeout(function () { window.location.reload(); }, 500); } else { layer.msg(data.msg, {icon: 2}); } } }); } } });弹框代码 部门名称 保存 部门名称 保存 二、选中变色
搜索prototype.spread或者"open": "close"。 b.prototype.spread = function(e, a) { var n = this, t = n.config, r = e.children("." + p), l = r.children("." + f), c = r.find("." + o), k = r.find("." + y), m = t.onlyIconControl ? c: l, x = ""; m.on("click", function(i) { var a = e.children("." + v), n = m.children(".layui-icon")[0] ? m.children(".layui-icon") : m.find(".layui-tree-icon").children(".layui-icon"); if (a[0]) { if (e.hasClass(C)) e.removeClass(C), a.slideUp(200), n.removeClass(u).addClass(h); else if (e.addClass(C), a.slideDown(200), n.addClass(u).removeClass(h), t.accordion) { var r = e.siblings("." + s); r.removeClass(C), r.children("." + v).slideUp(200), r.find(".layui-tree-icon").children(".layui-icon").removeClass(u).addClass(h) } } else x = "normal" }), k.on("click", function() { //修改源码点击选中变色 layui.$("." + p).removeClass("custom-tree-item-clicked"); //注意这里的k 对应着上面的k.on("click",的变量 有可能你的不叫k，修改成自己的变量名称 k.addClass("custom-tree-item-clicked"); var n = i(this); n.hasClass(d) || (x = e.hasClass(C) ? t.onlyIconControl ? "open": "close": t.onlyIconControl ? "close": "open", t.click && t.click({ elem: e, state: x, data: a })) }) }添加css样式 /*修改源码点击选中变色*/ .custom-tree-item-clicked { color: #ff5722 } |
【本文地址】
今日新闻 |
推荐新闻 |